<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: hotpink;
				margin: 200px auto;
				transition: all .3s;
			}

			div:hover {
				/* transform: scale(2, 2); */
				/* 只单独设置宽或者高的缩放只需要把另一个参数设为1就可以 */
				
				/* 指放大2倍宽度 */
				/* transform: scale(2, 1); */
				/* 只给一个参数就是等比缩放，宽高缩放一样的倍数 */
				/* transform: scale(2); */
				/* 小数就是缩小 */
				
				/* transform: scale(0.5); */
				transform: scale(0.6);
			}
		</style>
	</head>
	<body>
		<h2>2D转换的缩放scale</h2>
		<h2>语法格式transform:scale(x,y);</h2>
		注意事项:
		<ul>
			<li>其中x和y用逗号隔开</li>
			<li>transform:scale(1,1); 宽高都放大一倍相当于没有放大</li>
			<li>transform:scale(2,2); 宽高都放大两倍</li>
			<li>transform:scale(2); 只写一个参数则两个参数是一样的都是放大两倍</li>
			<li>transform:scale(0.5,0.5); 缩小</li>
			<li>缩放的优势 默认以中心点缩放，中心点可以设置，不影响其他盒子</li>
			<li>缩放里面的参数是没有单位的</li>
		</ul>
		<h2>以前单纯更改宽度和高度的缩放方式 盒子只会左右和往下延伸 并且还会影响其他盒子</h2>
		<div></div>
	</body>
</html>
